<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h3>你最喜欢哪个</h3>
    <input type="checkbox" v-model="all" @change="fullCheck()">全选<br>
    <span v-for="(item,index) in list"><input type="checkbox" v-model="item.check" @change="checkClick()">{{item.name}}</span><br>
    新增其他: <input type="text" v-model="newName"><br>
    <input type="file" @change="load($event)"><button @click="add()">上传</button><br>
    <span v-for="item in list"><img :src="item.src" style="width:200px;height:300;" v-show="item.check==true"></span><br>
    
    
    <input type="button" value="全选" @click="a">
            <input type="button" value="全不选" @click="b">
            <input type="button" value="反选" @click="c">
    
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                list:[{name:'1',check:false,src:'1.1.png'}, 
                    {name:'2',check:false,src:'1.2.png'}, 
                    {name:'3',check:false,src:'1.3.png'}, 
                    {name:'4',check:false,src:'1.4.png'}, 
                    ],
                    all:false,
                    newName:'',
                    fileSrc:''
            }
        },
        methods: {
            fullCheck(){
                if(this.all){
                    this.list.map(vv=>{
                        vv.check=true
                    })
                }else 
                    this.list.map(vv=>{
                        vv.check=false
                    })
        },
            checkClick(){
                let flag = this.list.length
                this.list.map(v=>{
                    if(!v.check) flag--
                })
                if(flag<this.list.length)
                    this.all=false
                else
                    this.all=true
            },
            load(e){
                let file = e.target.files
                let img = new FileReader()
                img.readAsDataURL(file[0]) 
                img.onload = ({target})=>{
                    alert("上传成功")
                    this.fileSrc = target.result
                }
            },
            add(){
                this.list.push({name:this.newName,check:false,src:this.fileSrc})
            },
            a() {
                this.all = true;
                this.list.forEach(item => {
                    item.check = true;
                });
            },

            b() {
                this.all = false;
                this.list.forEach(item => {
                    item.check = false;
                });
            },

            c() {
                this.list.forEach(item => {
                    item.check = !item.check;
                });
                this.all = this.list.every(item => item.check);
            },

            
        },
    }).mount('#app')
</script>